<template>
  <div class="productDetail">
    <div class="back">
      <router-link to="/product/productList">
        <div class="backBt">
          <span class="el-icon-back"></span>
          返回上层
        </div>
      </router-link>
    </div>
    <Rotation />
    <Detail />
    <Related />
    <Bottom />
  </div>
</template>

<script>
import Rotation from "./rotation/rotation";
import Detail from "./detail/detail";
import Related from "./related/related";
import Bottom from "@/components/bottom";
export default {
  name: "productDetail",
  components: {
    Rotation,
    Detail,
    Related,
    Bottom,
  },
  data() {
    return {
      product: {},
    };
  },
  beforeMount() {
    this.getDetails();
  },
  methods: {
    getDetails() {
      if (!this.$route.query.pid) {
        return false;
      }
      this.axios
        .get("/product/findOne", { params: { id: this.$route.query.pid } })
        .then((res) => {
          this.product = res.data;
        });
    },
  }, // methods
};
</script>

<style lang="scss" scoped>
.productDetail {
  width: 100%;
  height: 200vh;
  text-align: left;
  .back {
    width: 100%;
    height: 30px;
    font-size: 0.8rem;
    padding: 20px 0;
    display: flex;
    align-items: center;
    a {
      text-decoration: none;
    }
    .backBt {
      cursor: pointer;
      transition: 0.3s;
    }
    .backBt:hover {
      opacity: 0.7;
    }
  }
}
</style>